<template>
  <div class="clearfix">
    <a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
      <a-button>
        <upload-outlined></upload-outlined>
        Select File
      </a-button>
    </a-upload>
    <a-button
        type="primary"
        :disabled="fileList.length === 0"
        :loading="uploading"
        style="margin-top: 16px"
        @click="handleUpload"
    >
      {{ uploading ? 'Uploading' : 'Start Upload' }}
    </a-button>
    上传的结果是：<img :src="result"/> {{result}}
  </div>
</template>
<script setup>
const fileList = ref([]);
const uploading = ref(false);
const result = ref({})
const handleRemove = file => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
};

const beforeUpload = file => {
  fileList.value = [...(fileList.value || []), file];
  return false;
};

const handleUpload = () => {
  const formData = new FormData();
  formData.append('file', fileList.value[0]);
  uploading.value = true;

  // You can use any AJAX library you like
  useHttpUpload('/minio/upload', {body: formData})
      .then((res) => {
        fileList.value = [];
        uploading.value = false;
        result.value = res.data
        message.success('upload successfully.');
      })
      .catch(() => {
        uploading.value = false;
        message.error('upload failed.');
      });
};
</script>

